<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline" @submit.native.prevent>
      <el-form-item label="订单号">
        <el-input v-model="listQuery.q_orderSn" size="small"></el-input>
      </el-form-item>
      <el-form-item label="退货状态">
        <el-select class="toolbar-lable-right" v-model="listQuery.q_stateReturn" placeholder="请选择" size="small">
          <el-option v-for="item in stateReturn" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="退款状态">
        <el-select class="toolbar-lable-right" v-model="listQuery.q_stateMoney" placeholder="请选择" size="small">
          <el-option v-for="item in stateMoney" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="listQuery.q_memberName" size="small"></el-input>
      </el-form-item>
      <el-form-item label="商家">
        <el-select class="toolbar-lable-right" v-model="listQuery.q_sellerId" placeholder="请选择" size="small">
          <el-option v-for="item in sellers" :label="item.name" :value="item.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="this.getList">查询</el-button>
        <el-button icon="el-icon-refresh" size="small" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="button-table-margin">
      <el-button size="small" type="primary" @click="details" v-permission="['admin/order/productBack/details']">详情</el-button>
      <el-button size="small" type="primary" @click="submitpayd" v-permission="['admin/order/productBack/backmoney']">退款</el-button>
    </div>
    <el-table
      ref="singleTable"
      v-loading="listLoading"
      :data="dataList"
      border
      fit
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%">
      <el-table-column type="index" align="center" width="50"></el-table-column>
      <el-table-column label="商品名称" width="400" show-overflow-tooltip>
        <template slot-scope="scope">
          <div>
            <img width="80" height="80" :src="$imagePath + scope.row.masterImg" style="vertical-align: middle" />
            {{ scope.row.productName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column property="sellerName" width="200" label="商家"></el-table-column>
      <el-table-column property="orderSn" width="200" label="订单号"></el-table-column>
      <el-table-column property="memberName" width="120" label="用户名"></el-table-column>
      <el-table-column property="question" width="250" label="问题描述" show-overflow-tooltip></el-table-column>
      <el-table-column property="backMoney" width="100" label="退款金额"></el-table-column>
      <el-table-column property="backIntegral" width="100" label="退回积分"></el-table-column>
      <el-table-column property="backCouponSn" width="100" label="退回优惠券"></el-table-column>
      <el-table-column property="contactName" width="120" label="商家收件人"></el-table-column>
      <el-table-column property="contactPhone" width="120" label="商家收件电话"></el-table-column>
      <el-table-column property="addressAll" width="150" label="省市区"></el-table-column>
      <el-table-column property="addressInfo" width="200" label="详细地址" show-overflow-tooltip></el-table-column>
      <el-table-column property="logisticsName" width="150" label="物流公司"></el-table-column>
      <el-table-column property="logisticsNumber" width="150" label="快递单号"></el-table-column>
      <el-table-column property="optName" width="150" label="处理人"></el-table-column>
      <el-table-column property="stateReturn" width="150" label="退货状态">
        <template slot-scope="scope">
          {{ codeBox.MEM_PB_STATE_RETURN[scope.row.stateReturn] }}
        </template>
      </el-table-column>
      <el-table-column property="stateMoney" width="150" label="退款状态">
        <template slot-scope="scope">
          {{ codeBox.MEM_PB_STATE_MONEY[scope.row.stateMoney] }}
        </template>
      </el-table-column>
      <el-table-column property="returnFlag" width="150" label="预计退款路径">
        <template slot-scope="scope">
          {{ scope.row.returnFlag == "1" ? "退回余额" : "原路退回" }}
        </template>
      </el-table-column>
      <el-table-column property="backMoneyTime" width="200" label="退款时间"></el-table-column>
      <el-table-column property="createTime" width="200" label="创建时间"></el-table-column>

      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="detailsRow(scope.row.id)" type="text" size="small">详情</el-button>
          <el-button @click="moneyBackRow(scope.row)" type="text" size="small">退款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
import { listProductBack, getSellers, backmoneyProductBack } from "@/api/orderafter";
import Pagination from "@/components/Pagination";
import { Message } from "element-ui";
import { getCodeManager, codeToArray } from "@/api/all";
export default {
  name: "ordersProductBacklist",
  components: { Pagination },
  data() {
    return {
      dataList: [],
      stateMoney: [],
      stateReturn: [],
      sellers: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        q_orderSn: "",
        q_stateReturn: "",
        q_stateMoney: "",
        q_memberName: "",
        q_sellerId: "",
      },
    };
  },
  created() {
    getCodeManager("MEM_PB_STATE_RETURN, MEM_PB_STATE_MONEY", () => {
      this.stateMoney = codeToArray("MEM_PB_STATE_MONEY");
      this.stateReturn = codeToArray("MEM_PB_STATE_RETURN");
    });
    this.getList();
    getSellers().then((response) => {
      this.sellers = [
        ...response.data.rows.map((item) => {
          return {
            name: item.sellerName,
            value: item.id,
          };
        }),
      ];
    });
  },
  methods: {
    handleCurrentChange(val) {
      // 选中当前行数据
      this.currentRow = val;
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;
      listProductBack(this.listQuery).then((response) => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    reset() {
      this.listQuery = {
        page: 1,
        limit: 20,
        q_orderSn: "",
        q_stateReturn: "",
        q_stateMoney: "",
        q_memberName: "",
        q_sellerId: "",
      };
      this.getList();
    },
    details() {
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      this.$router.push({
        path: "/orderafter/backdetails",
        query: { id: this.currentRow.id },
      });
    },
    detailsRow(id) {
      this.$router.push({
        path: "/orderafter/backdetails",
        query: { id: id },
      });
    },
    submitpayd() {
      if (this.currentRow == null) {
        Message.error("请选择一条记录");
        return;
      }
      if (this.currentRow.stateReturn != 4) {
        Message.error("只有申请状态是店铺收货的申请才能退款");
        return;
      }
      if (this.currentRow.stateMoney != 1) {
        Message.error("该申请已经退款，请勿重复操作");
        return;
      }
      this.$confirm("用户货款将由系统退还到用户的账户中，确认要退款吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        backmoneyProductBack({ id: this.currentRow.id }).then((res) => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      });
    },
    moneyBackRow(currentRowBack) {
      if (currentRowBack == null) {
        Message.error("请选择一条记录");
        return;
      }
      if (currentRowBack.stateReturn != 4) {
        Message.error("只有申请状态是店铺收货的申请才能退款");
        return;
      }
      if (currentRowBack.stateMoney != 1) {
        Message.error("该申请已经退款，请勿重复操作");
        return;
      }
      this.$confirm("用户货款将由系统退还到用户的账户中，确认要退款吗？", "提示", {
        onfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        backmoneyProductBack({ id: currentRowBack.id }).then((res) => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.getList();
          } else {
            this.$message({
              type: "error",
              message: res.data.message,
            });
          }
        });
      });
    },
  },
};
</script>

<style></style>
